import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

// InkWell 可点击的组件;使用方法和 GestureDetector 几乎一致。由于点击效果是在 child 下面实现的，所以要求 child 为透明模式。所以如果 child 使用了 decoration/color 的 Container，需要替换为 Ink:

// 中间的菜单栏
class TopNavigator extends StatelessWidget {
  final List navigatorList;

  TopNavigator({Key key, this.navigatorList}) : super(key: key);

  Widget _gridViewItemUI(BuildContext context, item) {
    return InkWell(
      onTap: () {
        print("点击了导航");
      },
      child: Column(
        children: <Widget>[
          Image.network(
            item["image"],
            width: ScreenUtil().setWidth(95.0),
          ),
          Text(item["mallCategoryName"])
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(320.0),
      padding: EdgeInsets.all(3.0),
      child: GridView.count(
        physics: NeverScrollableScrollPhysics(),
        crossAxisCount: 5,
        padding: EdgeInsets.all(4.0),
        children: this.navigatorList.map((item) {
          return this._gridViewItemUI(context, item);
        }).toList(),
      ),
    );
  }
}
